<template>
  <view class="review-select-container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-text">正在加载商品信息...</view>
    </view>
    
    <!-- 商品选择列表 -->
    <view v-else-if="productList.length > 0" class="product-list">
      <view class="page-title">选择要评价的商品</view>
      
      <view 
        v-for="product in productList" 
        :key="product.id"
        class="product-item"
        @click="selectProduct(product)"
      >
        <image :src="product.productImg" class="product-img" mode="aspectFill" />
        <view class="product-info">
          <view class="product-name">{{ product.productName }}</view>
          <view class="product-meta">
            <text class="product-price">￥{{ product.salePrice }}</text>
            <text class="product-quantity">x{{ product.quantity }}</text>
          </view>
        </view>
        <view class="select-icon">→</view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else class="empty-container">
      <view class="empty-text">该订单暂无商品信息</view>
      <button class="back-btn" @click="goBack">返回订单列表</button>
    </view>
  </view>
</template>

<script>
import { getOrderDetail } from '@/api/order/order'

export default {
  data() {
    return {
      orderId: '',
      loading: true,
      productList: []
    }
  },
  methods: {
    async loadOrderProducts() {
      try {
        this.loading = true
        
        // 根据订单ID获取订单详情
        const res = await getOrderDetail(this.orderId)
        console.log('订单详情:', res)
        
                 if (res.code === 200 && res.data) {
           const order = res.data
           
           // 提取商品信息
           let orderItems = order.orderItems || order.items || order.products || []
           
           // 如果orderItems是字符串，尝试解析
           if (typeof orderItems === 'string') {
             try {
               orderItems = JSON.parse(orderItems)
             } catch (e) {
               console.error('解析orderItems失败:', e)
               orderItems = []
             }
           }
           
           // 确保orderItems是数组
           if (Array.isArray(orderItems)) {
             this.productList = orderItems.filter(item => 
               item && item.productId && item.productName
             )
           }
           
           console.log('提取的商品列表:', this.productList)
           
           // 检查商品数量
           if (this.productList.length === 0) {
             uni.showToast({
               title: '该订单暂无商品信息',
               icon: 'none'
             })
             return
           }
           
           // 如果只有一个商品，直接跳转到评价页面
           if (this.productList.length === 1) {
             console.log('只有一个商品，直接跳转评价页面')
             this.selectProduct(this.productList[0])
             return
           }
           
           // 如果有多个商品，显示选择列表
           console.log('有多个商品，显示选择列表')
         } else {
           throw new Error(res.message || '获取订单详情失败')
         }
        
      } catch (error) {
        console.error('加载订单商品失败:', error)
        uni.showToast({
          title: '加载商品信息失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    selectProduct(product) {
      console.log('选择商品:', product)
      
      // 构建跳转参数
      const params = {
        orderId: this.orderId,
        productId: product.productId,
        productName: encodeURIComponent(product.productName),
        productImg: encodeURIComponent(product.productImg || '')
      }
      
      console.log('跳转参数:', params)
      
      // 跳转到评价页面
      this.$tab.navigateTo(`/pages/order/review?${Object.keys(params).map(key => `${key}=${params[key]}`).join('&')}`)
    },
    
    goBack() {
      uni.navigateBack()
    }
  },
  
  onLoad(options) {
    if (options.orderId) {
      this.orderId = options.orderId
      this.loadOrderProducts()
    } else {
      uni.showToast({
        title: '订单ID不能为空',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
.review-select-container {
  min-height: 100vh;
  background: #fafbfc;
  padding: 16px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.loading-text {
  font-size: 16px;
  color: #666;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.product-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:hover {
    background-color: #f8f9fa;
  }
}

.product-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  margin-right: 12px;
  background: #f5f5f5;
  object-fit: cover;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-price {
  font-size: 14px;
  color: #f54b4b;
  font-weight: bold;
}

.product-quantity {
  font-size: 14px;
  color: #666;
}

.select-icon {
  font-size: 18px;
  color: #999;
  margin-left: 8px;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.empty-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.back-btn {
  background: linear-gradient(90deg, #f54b4b 0%, #f87e36 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 24px;
  font-size: 14px;
  cursor: pointer;
}
</style> 